﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>自动展开</title>
    <style type="text/css">
        body
        {
            margin: 0 auto;
            padding: 0;
        }
        a:focus
        {
            outline: none;
        }
        /*height auto高度自适应*/
        #pn
        {
            /* Display & Box Model */
            display: block;
            width: 600px;
            height: auto;
            padding: 30px 0 0 0;
            margin: 0 auto;
            /* Other */
            font-size: 9pt;
            text-align: center;
            background: #e8e8e8;
        }
        #pn h1{
          margin:0px 0 20px 0;
        }
        .slide
        {
            margin: 0;
            width: 600px;
            border-top: solid 4px gray;
            margin: 0 auto;
        }
        .btn-slide
        {
            background: gray;
            text-align: center;
            width: 590px;
            height: 30px;
            padding: 10px 10px 0 0;
            margin: 0 auto;
            display: block;
            color: #fff;
            text-decoration: none;
        }
    </style>
    <script type="text/javascript">
        var h = 0;
        function addCount() {
            //判断广告是否被隐藏
            if( "none" == document.getElementById("pn").style.display ){
                document.getElementById("pn").style.display = "block";
            }
            //判断广告体的高度
            if (h < 300){
                h = h + 5;
                document.getElementById("pn").style.height = h + "px";
            } else  return;

            setTimeout("addCount()", 30);
        }
        function subCount() {
            if (h > 0){
                h = h - 5;
                document.getElementById("pn").style.height = h + "px";
            } else  {
              /*当高度小于０时隐藏*/
              document.getElementById("pn").style.display = "none";
              return;
              }
            //循环迭代
            setTimeout("subCount()", 30);
        } 

        function showdiv(){
            addCount();
            setTimeout("subCount()", 5000); //停留时间自己调了 
        };
        //增加事件监听
        if(window.addEventListener){
            window.addEventListener("load",showdiv,false);
        }
        else{
            window.attachEvent("onload",showdiv);
        }
    </script>
</head>
<body>
  <div>
      <div id="pn">
        <h1>欢迎来到慕课网</h1>
        <p>展开收缩测试</p>
      </div>
      <p class="slide">
        <a href="javascript:showdiv();" id="strHref" class="btn-slide">慕课网欢迎你</a>
      </p>
  </div>
</body>
</html>
